import React, { Component } from 'react';
import './index.scss';

function whichAnimationEvent() {
  let t;
  const el = document.createElement('div');

  const animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'animationend',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
}
const animationendEvent = whichAnimationEvent();

export default class OverviewTitle extends Component {
  fixedDiv = React.createRef();

  state = {
    animateClassName: 'opacity0',
  };

  componentDidMount() {
    const container = document.getElementById('container');
    container.addEventListener('scroll', this.onScroll);
  }

  onScroll = () => {
    const container = document.getElementById('container');
    const header = document.querySelector('.mr-detail-content-header');
    const commitsBanner = document.querySelector('.condition-select-section');
    if (!container || !header) {
      return;
    }
    const commitsHeight = commitsBanner ? commitsBanner.getBoundingClientRect().height : 0;
    const fixedDivDom = this.fixedDiv.current;
    if (container.scrollTop > header.getBoundingClientRect().height + commitsHeight) {
      // 顶部元素
      const fixTopEle = document.querySelector('.mr-changes-title-fix');
      if (!fixTopEle) {
        return;
      }

      if (this.state.animateClassName !== 'slideInDown opacity1') {
        this.setState(
          {
            animateClassName: 'slideInDown opacity1',
          },
          () => {
            fixedDivDom.removeEventListener(animationendEvent, this.flexLeftTree);
            fixedDivDom.removeEventListener(animationendEvent, this.fixedLeftTree);
            fixedDivDom.addEventListener(animationendEvent, this.fixedLeftTree);
          },
        );
      }
    } else if (this.state.animateClassName !== 'slideOutUp') {
      this.setState(
        {
          animateClassName: 'slideOutUp',
        },
        () => {
          fixedDivDom.removeEventListener(animationendEvent, this.flexLeftTree);
          fixedDivDom.removeEventListener(animationendEvent, this.fixedLeftTree);
          fixedDivDom.addEventListener(animationendEvent, this.flexLeftTree);
        },
      );
    }
  };

  flexLeftTree = () => {
    // 左側樹固定
    const leftTree = document.querySelector('.changes-container-left');
    const rightDiff = document.querySelector('.changes-container-right');
    // 右侧讨论的面板定位
    const rightCommentList = document.querySelector('.comment-list-container');
    // 右侧扫描的面板定位
    const rightCodeScanList = document.querySelector('.codescan-list-container');
    leftTree.classList.remove('fixed');
    leftTree.style.top = 0;
    rightDiff.style.paddingLeft = 0;
    if (rightCommentList) {
      rightCommentList.style.top = `${rightDiff.getBoundingClientRect().top}px`;
    }
    if (rightCodeScanList) {
      rightCodeScanList.style.top = `${rightDiff.getBoundingClientRect().top}px`;
    }
  };

  fixedLeftTree = () => {
    // 左側樹固定
    const leftTree = document.querySelector('.changes-container-left');
    const rightDiff = document.querySelector('.changes-container-right');
    // 右侧讨论的面板定位
    const rightCommentList = document.querySelector('.comment-list-container');
    // 右侧扫描的面板定位
    const rightCodeScanList = document.querySelector('.codescan-list-container');
    const fixTopEle = document.querySelector('.mr-changes-title-fix');
    const distance =
      fixTopEle.getBoundingClientRect().top + fixTopEle.getBoundingClientRect().height;
    leftTree.classList.add('fixed');
    leftTree.style.top = `${distance}px`;
    rightDiff.style.paddingLeft = '294px';
    if (rightCommentList) {
      //  减5 是box-shadow的高度
      rightCommentList.style.top = `${distance}px`;
    }
    if (rightCodeScanList) {
      rightCodeScanList.style.top = `${distance}px`;
    }
  };

  componentWillUnmount() {
    const container = document.getElementById('container');
    container.removeEventListener('scroll', this.onScroll);
    const fixedDivDom = this.fixedDiv.current;
    fixedDivDom && fixedDivDom.removeEventListener(animationendEvent, this.flexLeftTree);
    fixedDivDom && fixedDivDom.removeEventListener(animationendEvent, this.fixedLeftTree);
  }

  render() {
    const { children } = this.props;
    const { repoSize, repoLimitSize } = window.FORCE.pathResource;
    const isTooLarge = Number(repoSize) >= Number(repoLimitSize || 2048);
    return (
      <div
        className={`mr-changes-title-fix ${this.state.animateClassName}`}
        id="changeFixedDiv"
        ref={this.fixedDiv}
        style={{ top: isTooLarge ? 130 : 90 }}
      >
        {children}
      </div>
    );
  }
}
